<template>
	<div class="app-container">
		<list-frames :loading="loading">
			<el-form slot="form" :model="queryData" ref="queryForm" size="small" :inline="true" v-if="showSearch">
				<el-form-item prop="name">
					<el-input v-model="queryData.name" placeholder="请输入姓名" clearable style="width: 160px" />
				</el-form-item>
				<el-form-item prop="idCard">
					<el-input v-model="queryData.idCard" placeholder="请输入身份证" clearable style="width: 160px" />
				</el-form-item>
				<el-form-item prop="phoneNumber">
					<el-input v-model="queryData.phoneNumber" placeholder="请输入手机号码" clearable style="width: 160px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-refresh" @click="handleResetQuery()">重置</el-button>
				</el-form-item>
			</el-form>
			<template slot="button">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOpenDialog()" v-hasPermi="['spm:user:add']">新增</el-button>
				<template v-if="checkedIds.length > 0">
					<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDeleteData()" v-hasPermi="['spm:user:remove']">
						删除
					</el-button>
				</template>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportData('user')" v-hasPermi="['spm:user:export']">
					导出
				</el-button>
			</template>
			<right-toolbar slot="handle" :showSearch.sync="showSearch" @queryTable="queryTableData()"></right-toolbar>
			<el-table slot="table" height="100%" :data="tableData" @selection-change="handleSelectionChange($event, 'userId')">
				<el-table-column type="selection" width="42" align="center" />
				<el-table-column label="姓名" prop="name" min-width="92" v-if="showColumns[1].visible" show-overflow-tooltip />
				<el-table-column label="用户性别" align="center" min-width="72" v-if="showColumns[2].visible">
					<template slot-scope="{ row }">
						<dict-tag :options="dict.type.sys_user_sex" :value="row.gender" />
					</template>
				</el-table-column>
				<el-table-column label="手机号码" prop="phoneNumber" min-width="110" v-if="showColumns[3].visible" />
				<el-table-column label="用户邮箱" prop="email" min-width="164" show-overflow-tooltip v-if="showColumns[4].visible" />
				<el-table-column label="身份证" prop="idCard" width="164" v-if="showColumns[5].visible" />
				<el-table-column label="最高学历" align="center" min-width="80" v-if="showColumns[6].visible">
					<template slot-scope="{ row }">
						<dict-tag :options="dict.type.sp_highest_degree" :value="row.highestDegree" />
					</template>
				</el-table-column>
				<el-table-column label="身份类型" align="center" min-width="90" v-if="showColumns[7].visible">
					<template slot-scope="{ row }">
						<dict-tag :options="dict.type.sp_people_type" :value="row.identityType" />
					</template>
				</el-table-column>
				<el-table-column label="涉密等级" align="center" min-width="80" v-if="showColumns[8].visible">
					<template slot-scope="{ row }">
						<dict-tag :options="dict.type.sp_level" :value="row.spLevel" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220" class-name="small-padding fixed-width">
					<template slot-scope="{ row }">
						<el-button type="text" icon="el-icon-view" @click="handleLookDetail(row.userId)" v-hasPermi="['spm:user:query']">详情</el-button>
						<el-button type="text" icon="el-icon-edit" @click="handleOpenDialog(row.userId)" v-hasPermi="['spm:user:edit']">修改</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleDeleteData(row.userId)" v-hasPermi="['spm:user:remove']">删除</el-button>
						<el-dropdown size="medium" @command="handleDropdownCommand($event, row)">
							<el-button type="text" icon="el-icon-d-arrow-right">更多</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="levelChange">等级变更管理</el-dropdown-item>
								<el-dropdown-item command="annualCheck">年度考核管理</el-dropdown-item>
								<el-dropdown-item command="recheck">复审管理</el-dropdown-item>
								<el-dropdown-item command="punishment">追责管理</el-dropdown-item>
								<el-dropdown-item command="privatelyLeave">因私出国管理</el-dropdown-item>
								<el-dropdown-item command="monthSubsidy">月度补贴管理</el-dropdown-item>
								<el-dropdown-item command="ciphertext">脱密管理</el-dropdown-item>
								<el-dropdown-item command="dutybook">责任书管理</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<template slot="page" v-if="dataCount > 0">
				<pagination :total="dataCount" :page.sync="queryData.pageNum" :limit.sync="queryData.pageSize" @pagination="queryTableData()" />
			</template>
		</list-frames>
		<form-dialog v-model="formDialog" :data-id="dataId" @finish="queryTableData()"></form-dialog>
	</div>
</template>

<script>
import formDialog from './form';
import listMixins from '../common/listMixins';
import { listUser, delUser } from '@/api/personnal/person';

export default {
	name: 'User',
	mixins: [listMixins],
	components: { formDialog },
	dicts: ['sys_user_sex', 'sp_highest_degree', 'sp_level', 'sp_people_type'],
	data() {
		return {
			pageName: '涉密人员',
			showColumns: [
				{ key: 0, label: '头像地址', visible: true },
				{ key: 1, label: '姓名', visible: true },
				{ key: 2, label: '用户性别', visible: true },
				{ key: 3, label: '手机号码', visible: true },
				{ key: 4, label: '用户邮箱', visible: true },
				{ key: 5, label: '身份证', visible: true },
				{ key: 6, label: '最高学历', visible: true },
				{ key: 7, label: '身份类型', visible: true },
				{ key: 8, label: '涉密等级', visible: true }
			]
		};
	},
	computed: {
		userId() {
			return this.$route.query.id;
		},
		delFunction() {
			return eval(delUser);
		},
		exportUrl() {
			return 'spm/user/export';
		}
	},
	methods: {
		//获取列表数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await listUser(params);
			this.loading = false;
			if (result.code === 200) {
				this.dataCount = result.total;
				this.tableData = result.rows || [];
			}
		},

		handleDropdownCommand(command, data) {
			let routerPath = (() => {
				if (command === 'levelChange') {
					return '/peoples/grade';
				} else if (command === 'annualCheck') {
					return '/peoples/examine';
				} else if (command === 'recheck') {
					return '/peoples/review';
				} else if (command === 'punishment') {
					return '/peoples/punishment';
				} else if (command === 'privatelyLeave') {
					return '/peoples/leave';
				} else if (command === 'monthSubsidy') {
					return '/peoples/subsidy';
				} else if (command === 'ciphertext') {
					return '/peoples/ciphertext';
				} else if (command === 'dutybook') {
					return '/peoples/dutybook';
				}
			})();
			this.$router.push({ path: routerPath, query: { id: data.userId } });
		},

		handleLookDetail(id) {
			this.$router.push({
				path: '/peoples/user-detail/' + id
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.avatar_image {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
}
</style>
